<template>
  <div>
    <h1>VUE Router</h1>
    <p>页面传值：适用于页面之间的参数传递</p>
    <p>？是间隔符，？后面的是query</p>
    <p>？是间隔符，？前面的是params</p>
    <p>？后面的参数：{{$route.query.name}}</p>
    <p>？后面的参数：{{$route.query.age}}</p>
    <p>？后面的参数：{{$route.query.no}}</p>
    <hr>
    <p>？后前的参数：{{$route.params.username}}</p>
    <p>动态路由——经典场景：前一个页面是列表页，当前页面是详情页。适用于页面大量重复，结构相似、数据不同</p>
    <p>动态路由的特点：修改url时，如果仍然符合当前的路由规则，就意味着还要使用这个组件。就不会先删除这个组件，再创建这个组件，而是直接复用。所以，钩子函数不会再次执行。</p>
    <p>为了响应路由的变化，有两个方案：1.watch2.路由的钩子函数。</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  // watch: {
  //   '$route' (to, from) {
  //     console.log(`我正在请求${this.$route.params.username}对应的数据...`)
  //   }
  // },
  beforeRouteUpdate(to, from, next) {
    console.log(`我正在请求${this.$route.params.username}对应的数据...`)
    next()
  },
  created() {
    console.log(`我正在请求${this.$route.params.username}对应的数据...`)
  }
}
</script>

<style scoped>

</style>
